<template>
	  <div class="login-register">
			<input type="text" placeholder="请输入手机号" class="ipone"/>
			<div class="iponeerror"></div>
			<input type="password" placeholder="请输入密码" class="word"/>
			<div class="worderror"></div>
			
	  </div>
</template>

<script>
	$(".ipone").blur(function(){
        var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
        if(reg.test($(".ipone").val())){
        	$(".iponeerror").html(" ")
            $(".iponeerror").addClass("icon1")
        }else if(!reg.test($(".ipone").val())){
        	 $(".iponeerror").removeClass("icon1")
             $(".iponeerror").html('手机号码不正确，请重新输入');
        }
    });
    //密码验证
    $(".word").blur(function(){
        var reg = /^[0-9_a-zA-Z]{6,18}$/;
        if(reg.test($(".word").val())){
        	$(".worderror").html(" ")
            $(".worderror").addClass("icon1");
        }else if(!reg.test($(".word").val())){
        	$(".worderror").removeClass("icon1");
            $(".worderror").html('密码格式不对');
        }
    });
</script>

<style scoped>
	.login-register input{	
		width: 300px;
		margin: 10px 0;	
	border: 1px solid #d3d3d3;
    padding: 3px 8px;
    background: #f9f9f9;
    color: #666;
    height: 37px;  
    font-family: "Microsoft Yahei";
	}
	.icon1{
		width:15px;
		height: 15px;
		background: url(../assets/img/duihao.png) 100% 100% no-repeat;
		background-size: 100% 100%;
		clear: both;
	}
</style>
